<template>
	<view>
		
		<view class="father" style="width: 300upx;"  @tap="kit.preview(item[contentKey])"  v-if="item[typeKey] == 1">
			<view class="ho father z3">
				<image class="rds4 bd" :src="item[contentKey]" mode="aspectFill"></image>
			</view>
			<view class="abs top right pr5 pt5 z3">
				<view class="rds100 flex ct " style="width: 20px;height: 20px;background-color: rgba(255,255,255,0.5);border-color: #fff;">
					<view class="rds100 white  sIcon-view fz12"></view>
				</view>
			</view>
		</view>
		
		<view @tap="playVideo(item[contentKey])" class="father hover" style="width: 300upx;"  v-if="item[typeKey] == 2">
			<view class="ho father z3">
				<image class="rds4 bd" :src="item[coverKey]" mode="aspectFill"></image>
			</view>
			<view class="abs flex ct z3 wrapper rds4" style="background-color: rgba(0,0,0,0.3);">
				<view class="rds100 flex ct bd2" style="width: 40px;height: 40px;background-color: rgba(255,255,255,0.5);border-color: #fff;">
					<view class="rds100 white iconfont icon-icon_play fz24"></view>
				</view>
			</view>
		</view>
		
		<view>
			<playVoice :inverse="inverse" :src="item[contentKey]" :time="item[durationKey]" v-if="item[typeKey] == 3"></playVoice>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'materials',
		data() {
			return {
				
			};
		},
		props: {
			contentKey: {
				default: "content"
			},
			coverKey: {
				default: "cover"
			},
			typeKey: {
				default: "type"
			},
			durationKey: {
				default: "duration"
			},
			inverse: {
				default: false
			},
			item : {
				default : function(e){
					return {} ;
				},
			}
		},
		methods:{
			playVideo:function(videoSrc){
				uni.setStorageSync("videoSrc" , videoSrc);
				uni.navigateTo({
					url:"/pages/playVideo/playVideo"
				});
			},
		}
	}
</script>

<style>
.viewIcon{
	width: 36upx;
	height: 36upx;
	line-height: 38upx;
}

</style>
